<template>
  <div>
    <!-- 商品改价弹框 -->
    <Modal v-model="editPop" width="48" @on-visible-change="clearClose" class-name="vertical-center-modal"
      :mask-closable="false">
      <!-- 页头 -->
      <div slot="header" class="header-title">{{ $t('editPricePop.price_title') }}</div>
      <!-- 内容 -->
      <div class="content-wrap">
        <!-- 价格 -->
        <Input v-model="form.price">
        <span slot="prepend">CNY</span>
        </Input>
        <div class="input-tips">
          <Icon type="ios-alert" size="18" />
          {{ $t('editPricePop.price_tips') }}
        </div>
        <div class="default-desc">{{ $t('editPricePop.price_tips_desc') }}</div>
        <Divider />
        <div class="sub-title"><span class="pointer-icon">*</span>{{ $t('editPricePop.price_label') }}</div>
        <RadioGroup v-model="form.reason">
          <Radio :label="$t('editPricePop.price_radio_item1')"></Radio>
          <Radio :label="$t('editPricePop.price_radio_item2')"></Radio>
          <Radio :label="$t('editPricePop.price_radio_item3')"></Radio>
          <Radio :label="$t('editPricePop.price_radio_item4')"></Radio>
        </RadioGroup>
        <div class="sub-title" style="margin-top: 24px;"><span class="pointer-icon">*</span>{{
          $t('editPricePop.price_upload_label') }}</div>
        <Upload :show-upload-list="false" :headers="{
          'X-Access-Token': userToken,
          'lang': 'en_US'
        }" biz="chat" :data="{
          biz: 'custom'
        }" name="file" :disabled="uploadLoading" :max-size="3072" :before-upload="handleBeforeUpload"
          :on-success="onSuccess" :on-exceeded-size="handleMaxSize" :action="uploadURL">
          <div class="loading-wrap" v-if="uploadLoading">
            <t-loading></t-loading>
          </div>
          <div v-if="urlImage != ''" class="preview-img">
            <img class="upload-image" :src="urlImage" alt="" />
            <img src="@/assets/images/public/delete.png" class="delete-icon" @click="removeMet($event)" alt="">
            <div class="overlay"></div>
          </div>
          <div v-else class="upload-sty">
            <img src="@/assets/images/public/upload_img.webp" class="upload-img" alt="">
          </div>
        </Upload>
      </div>
      <!-- 底部 -->
      <div slot="footer" class="footer-wrap">
        <div class="cancel-text" @click="closeCancel()">{{ $t('pay.cancel') }}</div>
        <div class="confirm-text" @click="confirmBtn()">{{ $t('personal.Search-confirm') }}</div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { commonUpload } from "@/api/sys";
import TLoading from "@/components/t-loading";

export default {
  props: {
    popPrice: {
      type: Number,
      default: 0,
    },
  },
  components: { TLoading },
  data() {
    return {
      editPop: false,
      form: {
        reason: this.$t('editPricePop.price_radio_item1')
      },
      uploadLoading: false,
      userToken: localStorage.getItem("USER_TOKEN"),
      uploadURL: commonUpload(),
      // imageList: '',
      urlImage: '',
      editData: {}
    }
  },
  watch: {
    popPrice(newValue) {
      this.form.price = newValue;
    },
  },
  methods: {
    handleBeforeUpload(file) {
      this.uploadLoading = true;
    },
    onSuccess(response) {
      // 上传成功
      this.uploadLoading = false;
      if (response.code == 0 || response.code == 200 || response.code == 201) {
        let data = response.result;
        this.urlImage = data.url;
        // this.imageList = data.url;
      } else {
        this.$Message.error(response.message);
      }
    },
    handleMaxSize(file) {
      this.uploadLoading = false;
      this.$Message.error(`File ${file.name} is too large, no more than 3M.`);
    },
    removeMet(event) {
      event.stopPropagation();
      // 删除图片
      // this.imageList = '';
      this.urlImage = '';
    },
    // 点击叉号关闭
    clearClose(val) {
      if (val == false) {
        this.form = {};
        this.form.reason = '购买折扣';
        // this.imageList = '';
        this.urlImage = '';
      }
    },
    // 取消
    closeCancel() {
      this.editPop = false;
      this.form = {};
      this.form.reason = '购买折扣';
      // this.imageList = '';
      this.urlImage = '';
    },
    // 确认
    confirmBtn() {
      if (!this.form.reason) {
        this.$Message.error(this.$t("editPricePop.price_label"));
        return false;
      }
      if (!this.urlImage) {
        this.$Message.error(this.$t("editPricePop.price_upload_label"));
        return false;
      }
      let obj = {
        ...this.editData,
        manuaPrice: this.form.price,
        manuaAdjustRemark: this.form.reason,
        manuaAdjustImage: this.urlImage
      }
      this.$emit("changePrice", obj);
      this.editPop = false;
      localStorage.setItem('newPrice', this.form.price)
    },
    open(item) {
      this.editData = item;
      this.editPop = true;
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-header) {
  border: none;
  padding: 48px 44px;
}

:deep(.ivu-modal-body) {
  padding: 0 44px;
}

:deep(.ivu-modal-footer) {
  border: none;
  padding: 42px 44px 32px 44px;
  text-align: left;
}

:deep(.ivu-modal-close) {
  position: absolute;
  top: 42px;
  right: 43px;
}

:deep(.ivu-modal-close .ivu-icon-ios-close) {
  color: #333333;
  font-size: 48px;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .header-title {
    font-family: Open Sans, Open Sans;
    font-weight: 600;
    font-size: 24px;
    color: #1E1714;
    line-height: 23px;
  }

  .content-wrap {

    :deep(.ivu-input-group) {
      width: 400px;
      height: 44px;
      border-radius: 6px 6px 6px 6px;

      .ivu-input-group-prepend {
        padding: 12px 17px;
        font-family: Open Sans, Open Sans;
        font-weight: 400;
        font-size: 14px;
        color: #AEB0B9;
        line-height: 16px;
      }

      .ivu-input {
        height: 44px;
      }
    }

    .input-tips {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #FF186B;
      line-height: 19px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 20px;
    }

    .default-desc {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #74767F;
      line-height: 24px;
      margin-top: 12px;
    }

    .sub-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20px;
      color: #333333;
      line-height: 20px;

      .pointer-icon {
        color: #FF186B;
      }
    }

    .ivu-radio-wrapper {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20px;
      color: #74767F;
      line-height: 32px;
      margin-right: 50px;
      margin-top: 16px;
    }

    .preview-img {
      position: relative;

      .upload-image {
        width: 107px;
        height: 107px;
        border-radius: 11px 11px 11px 11px;
        margin-top: 16px;
      }

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 107px;
        height: 107px;
        background-color: transparent;
        display: none;
        margin-top: 16px;
      }

      .delete-icon {
        display: none;
      }
    }

    .preview-img:hover>.overlay {
      display: block;
      border-radius: 11px;
      background-color: rgba(0, 0, 0, 0.5);
      margin-top: 16px;
    }

    .preview-img:hover>.delete-icon {
      display: block;
      width: 24px;
      height: 24px;
      position: absolute;
      top: 57px;
      left: 41px;
      z-index: 2,
    }

    .upload-sty {
      width: 107px;
      height: 107px;
      border-radius: 11px 11px 11px 11px;
      border: 1px dashed #CACACA;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 24px;
      cursor: pointer;
    }
  }

  .footer-wrap {
    display: flex;
    justify-content: end;
    gap: 24px;

    .cancel-text {
      padding: 11px 40px;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #E5E5E5;
      font-family: Open Sans, Open Sans;
      font-weight: 400;
      font-size: 16px;
      color: #1E1714;
      line-height: 19px;
      cursor: pointer;
    }

    .confirm-text {
      padding: 11px 40px;
      background: #F21473;
      border-radius: 8px 8px 8px 8px;
      font-family: Open Sans, Open Sans;
      font-weight: 600;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 19px;
      cursor: pointer;
    }
  }
}
</style>
